<!<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>article_edit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/common/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="static/common/bootstrap/css/bootstrap.min.css">
    <script src="static/common/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="static/common/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="static/ckeditor/ckeditor.js"></script>
    <style>
        *{
          list-style: none;
          margin: 0px;
          padding: 0px;
        }
        html,body{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .container{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .icon_put{
            font-size: 15px;
            border: 1px solid #E7E7E7;
            padding: 9px 20px 9px 20px;
            border-radius: 5px;
        }
        .main_content{
            position: absolute;
            width:100%;
        }
        .editor{
            width:50%;
            margin-left: 25%;
        }
        .title_wrap{
            
        }
        .title_wrap .title_cover{
            background:#F7F8F9;
            height: 200px;
            border-radius: 4px
        }
        .title_wrap .title_cover:hover{
            cursor: pointer;
        }
        /*封面camare*/
        object{
          
        }
        #svg_upload{
            position: relative;
            top: 100px;
            margin-left: -25px;
            left: 50%;
            margin-top: -20px;
            width: 32px;
        }
        .title_cover span{
            display: none;
            width: 56px;
            position: relative;
            left: 50%;
            top: 50%;
            margin-left: -38px;
            margin-top: 5px;
            color: #B3B3B3;
        }
        .pic_preview{
            background:lightblue;
            
        }
        .title_wrap .article_title{
            height: 50px;
        }
        .article_title input{
            width: 100%;
            height: 100%;
            border: none;
            font-size: 35px;
            font-weight: 600;
        }
        input::-webkit-input-placeholder{
            font-size: 35px;
            color:#B3B3B3;
            font-weight: 600;
        }
        .editor_wrap{
            margin-bottom: 200px;
        }
        /*富文本编辑器的高度*/
        .ck-editor__editable {
            min-height: 300px;
        }
        /*图片预览*/
        .pic_preview{
            width: 100%;
            height: 600px;
            background: lightgreen;
        }
        .dealimg_wrap{
            width:145px;
            height:50px;
            background:#161716;
            position: absolute;
            right: 15px;
            bottom:0px;
            display: none;
        }
        #svg_delete{
            position: absolute;
            right: 15px;
            top: 3px;
            font-size: 30px;
            color: #ffffff;
            cursor: pointer;
        }
        #re_svg_file{
            width: 32px;
            position: absolute;
            top: 5px;
            left: 18px;
            font-size: 30px;
            color: #ffffff;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
    <div class="container">
        <div class="row" style="margin-bottom: 100px;">
            <div class="col-md-12 column">
                    <nav class="navbar navbar-default" style="width:100%;position: fixed;z-index: 1;left: 0px;">
                            <div class="container-fluid">
                                <div class="navbar-header">
                                    <a class="navbar-brand" href="#"><i class="layui-icon layui-icon-edit" style="font-size: 26px;"></i> </a>
                                </div>
                                <div class="navbar-header">
                                    <span style="line-height: 50px;">文章编辑</span>
                                </div>
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <ul class="nav navbar-nav navbar-right">
                                        <li><a onclick="upload();"><i class="layui-icon layui-icon-release icon_put" style="font-size: 15px;">发布</i></a></li>
                                        <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我 <span class="caret"></span></a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">个人中心</a></li>
                                            <li><a href="#">首页</a></li>
                                            <li><a href="#">退出</a></li>
                                        </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                    </nav>
            </div>
        </div>
        <img id="image" name="cover" class="pic_preview" src="" style="display: none;"/>
        <div class="dealimg_wrap"> 
            <span><i id="re_svg_file" class="layui-icon layui-icon-picture-fine"></i></span> 
            <span><i id="svg_delete" class="layui-icon layui-icon-delete"></i></span>  
        </div>
        <div class="row main_content">
            <div class="row editor title_wrap">
                <div id="fileSelect" class="title_cover">
                    <object id="svg_upload" data="static/system/svg/upload.svg" type="image/svg+xml"></object>
                    <span>添加题图</span>
                </div>
                <div class="article_title">
                    <input type="text" id="articleTitle" name="articleTitle" placeholder="请输入标题">
                </div>
            </div>
            <div class="editor editor_wrap">
                <textarea name="content" id="ckeditor1" placeholder="请输入正文">
                   
                </textarea>          
            </div>
        </div>     
    </div>
</body>
<script type="text/javascript">
    var myEditor = null;
    var uId;
    window.onload = function(){
    	fetch("/user_module/getUserMsg",{
                method: "GET",
                headers: {
                "Content-Type": "application/JSON"
            }
             }).then(res => res.json()).catch(error => console.error(error))
                    .then(function(response){
                    	uId=response.data.uId;
                    });
        ClassicEditor.create( ckeditor1,{
            toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote','imageUpload','link'],
                        ckfinder: {
                            uploadUrl:'/article_module/upload_cover'
                            // uploadUrl : '/admin/Upload/uploadImages?command=QuickUpload&type=Files&responseType=json'
                            //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
                        }
                    }).then(editor => {
                        window.editor = editor;
                        data = editor.getData();
                     
                        } )
                        .catch(error => {
                            console.log(error);
                        });

    }
    /*题图盖*/
    function title_hover(){
        $('.title_cover').mouseover(function(){
            $('.title_cover').children().last().css('display','block');
        });
        $('.title_cover').mouseleave(function(){
            $('.title_cover').children().last().css('display','none');
        });
    }
    /*触发图片点击*/
    function chooseFile(){
        var fileSelect = document.getElementById("fileSelect"),
        fileElem = document.getElementById("fileElem");

        fileSelect.addEventListener("click", function (e) {
        if (fileElem) {
            fileElem.click();
        }
        e.preventDefault(); // 避免导航到 "#"
        }, false);
    }
    /*处理图片预览*/
    function handleFiles(file){
        var fileType = file[0].type.split("/")[0];
        if(fileType != "image") {
            alert("请上传图片")
            return;
        }
        //图片大小的限制
        var fileSize = Math.round(file[0].size / 1024 / 1024);
        if(fileSize >= 3) {
            alert("请上传小于少于3M的图片");
            return;
        }
        //获取img对象
        var img = document.getElementById("image");
        //建一条文件流来读取图片
        var reader = new FileReader();
        //根据url将文件添加的流中
        reader.readAsDataURL(file[0]);
        //实现onload接口
        reader.onload = function(e) {
            //获取文件在流中url
            url = reader.result;
            //将url赋值给img的src属性
            img.src = url;
            $('.article_title').css('margin-top','-130px');
            $('.article_title').children('input').css({'background':'none','color':'#ffffff'});
            $('.dealimg_wrap').css('display','block');
            $('#fileSelect').css('display','none');
            $('#image').css('display','block');
        };
    }
    /*取消图片大图预览，替换图片预览*/
    function cancel_preview(){
        $('#svg_delete').on('click',function(){
            $('.article_title').css('margin-top','0px');
            $('.article_title').children('input').css({'background':'','color':''});
            $('.dealimg_wrap').css('display','none');
            $('#fileSelect').css('display','block');
            $('#image').css('display','none');
            $('#image').attr('src','');
        });
        var fileSelect = document.getElementById("re_svg_file"),
        fileElem = document.getElementById("fileElem");

        fileSelect.addEventListener("click", function (e) {
        if (fileElem) {
            fileElem.click();
        }
        e.preventDefault(); // 避免导航到 "#"
        }, false);
    }
    $(document).ready(function(){
        title_hover();
        /*图片预览*/
        chooseFile();
        cancel_preview();//取消大图预览
    })
    function upload() {

    $.ajax({
  url: "",
  type: "POST",
  data: fd,
  processData: false,  // 告诉jQuery不要去处理发送的数据
  contentType: false   // 告诉jQuery不要去设置Content-Type请求头
});
    	 
    }
function upload() {
	var url="/article_module/upload";
	var file=$('#fileElem')[0].files[0];
    let filedata = new FormData();
    filedata.append('file', file);
     filedata.append('content',$(".ck-content").children().text());
    filedata.append("articleTitle",$("#articleTitle").val());
    filedata.append('uId', uId);
    let request = new Request(url, {
        method: 'POST',
        credentials: 'include',
        body: filedata,
    });
    fetch(request)
        .then(response => response.json())
        .then(function(response){
                        if(response.status==200){
                            alert("上传成功");
                      }
                      window.location.href="index.html";
              });
}


</script>
</html>